<script setup lang="ts">
  import {ref} from 'vue' // 可以定义基本类型和对象类型的响应式数据
  import {reactive} from 'vue' // 只能定义对象类型的响应式数据

  // 数据
  // 对象
  let company = reactive({name: '优医视觉', age: 5, work: '医学卡片'})

  let member3D = ref({id: '3d-3', price: 10})

  // 数组
  let cards = ref([
    {id:'card-1',name:'图片'},
    {id:'card-2',name:'3D'},
    {id:'card-3',name:'视频'}
  ])

  // 方法
  function changeName() {
    company.name = 'YouYiShiJue'
  }

  function changeAge() {
    company.age += 1
  }

  function showWork() {
    alert(company.work)
  }

  //给整个对象赋新值 reactive
  function changeCompany() {
    // company = reactive({name: '优医视觉1', age: 52, work: '医学卡片1'}) 无效
    // company = {name: '优医视觉1', age: 52, work: '医学卡片1'} 无效
    Object.assign(company,{name: '优医视觉1', age: 52, work: '医学卡片1'})
  }

  //给整个对象赋新值 ref
  function change3D() {
    member3D.value = {id: '3d-1', price: 100}
  }

  function replaceCard() {
    cards.value[0].name = '动态图片'
  }
</script>

<template>
  <div class="company">
    <h2>公司名称:{{company.name}}</h2>
    <h2>成立年限:{{company.age}}年</h2>
<!--    <h2>主营业务:{{company.work}}</h2>-->
    <button @click="changeName">显示英文</button>
    <button @click="changeAge">修改年限</button>
    <button @click="showWork">展示工作内容</button>

    <br>

    <h2>卡片展示形式</h2>
    <ul>
      <li v-for="card in cards" :key="card.id">
        {{card.name}}
      </li>
    </ul>
    <button @click="replaceCard">替换图片</button>
  </div>
</template>

<style scoped>
  .company {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }

  button {
    margin: 0 5px;
  }
</style>


